<template>
  <div class="me">
    <!-- 用户名和头像 -->
    <div class="user-name">
      <van-image
        round
        width="5rem"
        height="5rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <div style="text-align: center">
        <span>张三</span>
      </div>
    </div>
    <!-- 分割线 -->
    <van-divider :style="{ borderColor: '#f7f8fa', margin: '.3rem' }" />
    <!-- 导航菜单 -->
    <div class="order" @click="router.push('/myorder')">
      <div class="my-order">我的订单</div>
      <div class="order-all">查看全部</div>
    </div>
    <!-- 分割线 -->
    <van-divider :style="{ borderColor: '#f7f8fa', margin: '.1rem' }" />
    <van-grid :border="false" @click="router.push('/myorder')">
      <van-grid-item icon="balance-pay" :badge="myInfo.unPay" text="待支付" />
      <van-grid-item icon="logistics" :badge="myInfo.payed" text="代发货" />
      <van-grid-item
        icon="orders-o"
        :badge="myInfo.consignment"
        text="待签收"
      />
      <van-grid-item icon="sign" :badge="myInfo.success" text="已完成" />
    </van-grid>
    <!-- 分割线 -->
    <van-divider :style="{ borderColor: '#f7f8fa', margin: '.4rem' }" />
    <!-- 商城信息 -->
    <van-grid
      class="user-details"
      :column-num="3"
      :border="false"
      style="height: 5rem"
    >
      <van-grid-item
        ><div style="text-align: center">2</div>
        <br />我的收藏</van-grid-item
      >
      <van-grid-item
        ><div style="text-align: center">2</div>
        <br />我的消息</van-grid-item
      >
      <van-grid-item
        ><div style="text-align: center">2</div>
        <br />我的足迹</van-grid-item
      >
    </van-grid>
    <!-- 分割线 -->
    <van-divider :style="{ borderColor: '#f7f8fa', margin: '.4rem' }" />
    <!-- 固定设置 -->
    <van-cell-group>
      <van-cell
        title-style="cell-title"
        title="分销中心"
        icon="cart-o"
        is-link
      />
      <van-cell
        title-style="cell-title"
        title="领券中心"
        icon="coupon-o"
        is-link
      />
      <van-cell
        title-style="cell-title"
        title="我的优惠券"
        icon="label-o"
        is-link
      />
      <van-cell
        title-style="cell-title"
        title="收货地址"
        icon="location-o"
        to="/addressList"
        is-link
      />
    </van-cell-group>
    <!-- 登出 -->
    <div style="height: 1rem"></div>
    <div class="btn">
      <van-button type="danger" @click="loginOut">退出登录</van-button>
    </div>
    <div style="height: 4rem"></div>
  </div>
</template>

<script setup  name="My">
import { orderCount } from "@/api/user.js";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
let myInfo = ref({});
let router = useRouter();
onMounted(async () => {
  myInfo.value = await orderCount();
  console.log(myInfo.value, "12333");
});
function loginOut() {
  //清除储存的token
  sessionStorage.clear();
  router.push("/login");
}
</script>
<style lang="scss" scoped>
.van-cell__title,
.van-cell__value {
  text-align: left;
}
.van-image--round {
  margin: 0 auto;
}

.btn {
  display: flex;
  justify-content: center;
}
.user-details {
  .van-grid-item {
    .van-grid-item__content {
      line-height: 1.8rem;
    }
  }
}

.me {
  min-height: 100%;
  background-color: #f7f8fa;

  .order {
    height: 3rem;
    line-height: 3rem;
    background-color: #fff;

    .my-order {
      width: 50%;
      display: inline-block;
      font-weight: 700;
      text-align: left;
      padding-left: 1rem;
    }

    .order-all {
      width: 40%;
      display: inline-block;
      text-align: right;
      margin-right: 1rem;
      font-size: 0.8rem;
    }
  }

  .user-name {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }
}
</style>
